import { SearchOutlined } from '@ant-design/icons';
import '@theme-toggles/react/css/Classic.css';
import { Input } from 'antd';
import { observer } from 'mobx-react';
import React from 'react';
import ThemSwitch from '../../../components/ThemeSwitch';
import useStores from '../../../store';

function Index() {
  const { globalStore, search } = useStores();
  const [inputValue, setInputValue] = React.useState('');
  const [them, setThem] = React.useState('light');

  const handleThemChange = value => {
    setThem(value ? 'dark' : 'light');
    globalStore.setThem(value ? 'dark' : 'light');
  };

  const handleInput = e => {
    setInputValue(e.target.value);
  };

  const handleSearch = () => {
    search.showSearch(true, inputValue);
  };

  return (
    <div className="fixed top-0 left-0 right-0 backdrop-blur-lg bg-transparent min-h-10 z-50 shadow-sm px-[16%] flex items-center justify-between">
      <div className="flex items-center gap-4">
        <div
          className="w-16 h-16"
          style={{
            background: 'url(/images/logo.png) no-repeat center',
            backgroundSize: '80% 80%',
          }}
        ></div>
        {/* <div className="text-2xl font-bold ">Haogege HomePage</div> */}
      </div>
      <div className="flex items-center justify-center gap-4">
        <Input
          className="!bg-transparent !border-new-desc-dark dark:!border-new-desc-dark outline-none dark:text-new-text-dark rounded-3xl py-2 w-9 h-9 hover:w-48 !transition-all duration-300"
          onInput={handleInput}
          onPressEnter={handleSearch}
          prefix={<SearchOutlined />}
        ></Input>
        <ThemSwitch onChecked={handleThemChange}></ThemSwitch>
      </div>
    </div>
  );
}
export default observer(Index);
